<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%-- JSTL表达式（判断，循环，输出） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%-- 方法表达式（字符串截取，替换） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="<%=basePath%>css/amazeui.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/wap.css?2">
    <link rel="stylesheet" href="<%=basePath%>css/my.css">
    <title>星座图腾</title>
    <style>
        .sub{
            background: #ececec;
            border: none;
            padding: 0.3rem 1rem;
            margin-right: 0.5rem;
            border-radius: 0.5rem;
        }
        .add{
            background: #ececec;
            border: none;
            padding: 0.3rem 1rem;
            margin-left: 0.5rem;
            border-radius: 0.5rem;
        }
        .num{
            text-align: center;
            width: 2rem;
            border: none;
            background: #F4F4F4;
            padding: 0.3rem 0.5rem;
            border-radius: 0.5rem;
        }
        .f_b{
            color: #999;
            font-weight: bold;
        }
        /*全选、删除按钮*/
        .float-bar-wrapper{position:fixed;overflow: hidden;bottom:0;width: 100%;background:#fff ;border-top:1px solid #e5e5e5 ;}
        .float-bar-wrapper .select-all { float: left; width: 65px;height: 50px;line-height: 50px;padding-left: 5px;margin-top:-3px;position:relative;}
        .float-bar-wrapper .select-all .cart-checkbox { display: inline-block;width: 15px;margin-right:5px;}
        .float-bar-wrapper .select-all span {position: absolute;top: 2px;}
        .float-bar-wrapper .operations {float: left;line-height: 48px;height: 48px;}
        .float-bar-wrapper .operations a {margin-left:5px; float: left;}
        /*结算功能*/
        .float-bar-right {float: right;position: absolute; right: 0px;top: 0px; z-index: 4;padding-left: 20px;}
        .amount-sum,.price-sum,.btn-area {float: left;height: 48px;color: #3C3C3C;line-height:48px;}

        .amount-sum em {line-height: 50px;padding: 0px 5px;}

        .price-sum .price { color: #999;font-weight: bold; font-size: 18px; line-height: 48px;vertical-align: middle;margin-right:15px;}
        .btn-area{width: 10rem;background:#F40;text-decoration: none; text-align: center;}
        .submit-btn {line-height:48px;font-family: "Lantinghei SC","Microsoft Yahei";font-size:16px;color: #fff;}
        button{outline: none;}
    </style>
</head>
<body>
<%--<div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
    <a href="#top" title="">
        <img class="am-gotop-icon-custom" src="img/goTop.png" />
    </a>
</div>--%>

<form class="pet_mian" id="top" method="post">

    <div class="pet_head">
        <header data-am-widget="header"
                class="am-header am-header-default pet_head_block">
            <div class="am-header-left am-header-nav ">
                <a href="javascript:;" class="iconfont pet_head_jt_ico" onclick="window.location.href='<%=basePath%>activity/getActivityDetails/${activityInfo.activityId}'">&#xe601;</a>
            </div>
            <div class="pet_news_list_tag_name">星座图腾</div>
            <%--<div class="am-header-right am-header-nav">
              <a href="javascript:;" class="iconfont pet_head_gd_ico">&#xe600;</a>
            </div>--%>
        </header>
    </div>

    <div class="pet_content_main" style="padding-top: 60px;">
        <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
            <div class="am-list-news-bd">
                <input type="hidden" name="activityId" value="${activityInfo.activityId}" />
                <ul class="am-list">
                    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
                        <div class="am-u-sm-4 am-list-thumb">
                            <a href="###" class="">
                                <img src="${activityInfo.activityPic}" class="pet_list_one_img wh_" alt="" style="" />
                            </a>
                        </div>
                        <div class=" am-u-sm-8 am-list-main pet_list_one_nr" style="padding-left: 1rem;">
                            <h3 class="am-list-item-hd pet_list_one_bt"><a href="javascript:;" class="">${activityInfo.activityName}</a></h3>
                            <div class="am-list-item-hd pet_list_one_bt" style="line-height: 20px;font-size:12px;margin-top: -1px;color: #999; max-height: 1.5em; overflow: hidden; text-overflow: ellipsis;">${activityInfo.activityTitle}</div>
                            <div class="am-list-item-text pet_list_one_text" style="padding-left: 1rem; font-weight: bold;color: red;">￥ ${activityInfo.activityPrice}</div>
                            <div style="position: absolute; right: -1rem;">
                                <button type="button" class="sub">-</button><input class="num" name="itemCount" style="text-align: center;width: 3rem" type="text" value="1" readonly /><button type="button" class="add">+</button>
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                    </li>
                </ul></div></div></div>

    <div class="line" style="padding: 0;"></div>
    <input type="hidden" name="expressId" value="${expressList[0].expressId}" />
    <div class="pet_content_block pet_hd_con" onclick="window.location.href='<%=basePath%>order/getExpressList?activityId=${activityInfo.activityId}'">
        <article style="padding: 0;" data-am-widget="paragraph" class="am-paragraph am-paragraph-default pet_content_article" data-am-paragraph="{ tableScrollable: true, pureview: true }">
            <div class=" " style="color: black; clear: both;font-size: 1.7rem; border-top: 1px solid #f1f1f1; padding: 1.3rem 0px;" onclick="window.location.href='<%=basePath%>activitys_comment.jsp?activityId=${activityInfo.activityId}'">收货地址<span class="am-fr am-icon-chevron-right"></span></div>
        </article>
    </div>
    <div class="pet_content_block pet_hd_con">
        <article style="padding: 0;" data-am-widget="paragraph" class="am-paragraph am-paragraph-default pet_content_article" data-am-paragraph="{ tableScrollable: true, pureview: true }">
            <div class=" " style="color: black; clear: both;font-size: 1.7rem; border-top: 1px solid #f1f1f1; padding: 1.3rem 0px;">${expressList[0].name}<span class="am-fr">${expressList[0].mobile}</span></div>
            <div style="color: black; clear: both;font-size: 1.7rem; padding: 0 0 1.3rem 0;">${expressList[0].areaName}</div>
        </article>
    </div>
</form>

<div class="float-bar-wrapper">
    <div id="J_SelectAll2" class="select-all J_SelectAll">
    </div>
    <div class="operations">
    </div>
    <div class="float-bar-right">
        <div class="price-sum">
            <span class="txt f_b">合计应付: </span>
            <span class="price">¥ <em id="J_Total">${activityInfo.activityPrice}</em>(包邮)</span>
        </div>
        <div class="btn-area">
            <a href="javascript:;" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
                <span>结&nbsp;算</span>
            </a>
        </div>
    </div>

</div>

<script src="<%=basePath%>js/jquery.min.js"></script>
<script src="<%=basePath%>js/amazeui.min.js"></script>
<script src="<%=basePath%>js/height.js"></script>
<script>
    $(function(){

        // 动态计算新闻列表文字样式
        auto_resize();
        $(window).resize(function() {
            auto_resize();
        });
        $('.am-list-thumb img').load(function(){
            auto_resize();
        });

        $('.am-list > li:last-child').css('border','none');
        function auto_resize(){
            window.setTimeout(function () {
                $('.pet_list_one_nr').height($('.pet_list_one_img').height());
            },200);
        }
        $('.pet_nav_gengduo').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
        });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });

        $(".sub").click(function () {
            var $num = $(".num");
            if($num.val() <= 1){
                $num.val(1);
            }else{
                $num.val($num.val()-1);
                $("#J_Total").html(($("#J_Total").html()-${activityInfo.activityPrice}).toFixed(2));
            }
        });
        $(".add").click(function () {
            var $num = $(".num");
            if($num.val() <= 1){
                $num.val(1);
            }
            $num.val(parseInt($num.val())+1);
            $("#J_Total").html((parseFloat($("#J_Total").html())+${activityInfo.activityPrice}).toFixed(2));
        });

        var subFlag = true;
        $("#J_Go").click(function () {
            if(subFlag){
                subFlag = false;
                $.post("<%=basePath%>order/newOrder", $("#top").serialize(), function (res) {
                    if(res.code == 1){
                        if(res.data.payStatus != 1){
                            window.location.replace("<%=basePath%>order/wxPayPackage?orderId="+res.data.orderId+"&activityId="+${activityInfo.activityId});
                        }else{
                            window.location.replace("<%=basePath%>success.jsp?activityId=${activityInfo.activityId}");
                        }
                    }else{
                        alert(res.message);
                        subFlag = true;
                    }
                });
            }
        });

    });

</script>
</body>
</html>